<template>
  <div class="switchList-demo">
    <h3 class="title">基本</h3>
    <div>
      <p v-color:gray>{{ value1 }}</p>
      <div><d-switch-list v-model="value1" :datas="param1"></d-switch-list></div>
      <p v-color:gray>{{ value2 }}</p>
      <div><d-switch-list v-model="value2" :datas="param2"></d-switch-list></div>
      <p v-color:gray>{{ value3 }}</p>
      <div><d-switch-list v-model="value3" :datas="param3"></d-switch-list></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'switchListDemo',
  data () {
    return {
      value1: '选择1',
      value2: '1',
      value3: '1',
      param1: ['选择1', '选择2', '选择3'],
      param2: { 1: '选择1', 2: '选择2', 3: '选择3' },
      param3: [{
        key: '1',
        title: '选择1',
        icon: 'd-icon-home'
      }, {
        key: '2',
        title: '选择2',
        icon: 'd-icon-task'
      }, {
        key: '3',
        title: '选择3',
        icon: 'd-icon-users'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
// .switchList-demo
</style>
